<template>
	<view class="detail">
		<view class="fixbg" :style="{ backgroundImage: `url(${songDetail.al && songDetail.al.picUrl})` }"></view>
		<MusicHead :title="songDetail.name || '歌名'" :isShowIcon="true" color="white"></MusicHead>
    <view class="container" v-show="!isLoading">
    	<scroll-view scroll-y="true">
        <view 
          class="detail-play"
          @tap="handleToPlay"
        >
          <image 
            :class="{ 'detail-play-run': isPlay }"
            :src="songDetail.al && songDetail.al.picUrl" 
            mode=""
          ></image>
          <text 
            class="iconfont"
            :class="isPlay ? 'iconpause' : 'iconbofang1'"
          ></text>
          <view></view>
        </view>
        <view class="detail-lyric">
          <view class="detail-lyric-wrap" :style="{ transform: `translateY(-${(lyricIndex - 1) * 82}rpx)` }">
            <view 
              class="detail-lyric-item"
              :class="{ active: lyricIndex === index }"
              v-for="item, index in songLyric"
              :key="index"
            >
              {{ item.lyric }} 
            </view>
          </view>
        </view>
        <view class="detail-like">
          <view class="detail-like-head">
            喜欢这首歌的人也听
          </view>
          <view 
            class="detail-like-item"
            v-for="item in songSimi"
            :key="item.id"
            @tap="handleToSimi(item.id)"
          >
            <view class="detail-like-img">
              <image :src="item.album.picUrl" mode=""></image>
            </view>
            <view class="detail-like-song">
              <view>{{ item.name }}</view>
              <view>
                <image
                	v-if="item.privilege.flag > 60 && item.privilege.flag < 70" 
                	src="../../static/dujia.png" 
                	mode=""
                ></image>
                <image
                	v-if="item.privilege.maxbr === 999000"
                	src="../../static/sq.png" 
                	mode=""
                ></image>
                {{ item.album.artists[0].name }} - {{ item.name }}
              </view>
            </view>
            <text class="iconfont iconbofang"></text>
          </view>
        </view>
        <view class="detail-comment">
          <view class="detail-comment-head">
            精彩评论
          </view>
          <view 
            class="detail-comment-item"
            v-for="item in songComment"
            :key="item.id"
          >
            <view class="detail-comment-img">
              <image :src="item.user.avatarUrl" mode=""></image>
            </view>
            <view class="detail-comment-content">
              <view class="detail-comment-content-title">
                <view class="detail-comment-content-name">
                  <view>{{ item.user.nickname }}</view>
                  <view>{{ new Date(item.time).toLocaleString().split(' ')[0] }}</view>
                </view>
                <view class="detail-comment-content-like">
                  {{ item.likedCount | formatCount }}
                  <text class="iconfont iconlike"></text>
                </view>
              </view>
              <view class="detail-comment-content-text">
                {{ item.content }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
	</view>
</template>

<script>
  import MusicHead from "@/components/MusicHead.vue"
  import { songDetail, songSimi, songComment, songLyric, songUrl } from "@/common/api.js"
  
	export default {
		data() {
			return {
				songDetail: {},
        songSimi: [],
        songComment: [],
        songLyric: [],
        songUrl: '',
        lyricIndex: 0,
        isPlay: false,
				isLoading: true
			}
		},
    components: {
    	MusicHead
    },
    onLoad({ songId }) {
      this.getMusic(songId)
    },
		methods: {
      handleToSimi(id) {
        this.getMusic(id)
      },
      listenLyricIndex() {
        if (this.lyricIndex === this.songLyric.length - 1) return
        for (let i = 0; i < this.songLyric.length; i++) {
          if (this.bgAudioMannger.currentTime > this.songLyric[this.songLyric.length - 1].time) {
            this.lyricIndex = i
            break;
          }
          if (this.bgAudioMannger.currentTime > this.songLyric[i].time && this.bgAudioMannger.currentTime < this.songLyric[i + 1].time) {
            this.lyricIndex = i
          }
        }
      },
      handleToPlay() {
        if (this.bgAudioMannger.paused) {
          this.bgAudioMannger.play()
        } else {
          this.bgAudioMannger.pause()
        }
      },
      async getMusic(songId) {
				
				this.$store.commit('NEXT_ID', songId)
				
				uni.showLoading({
					title: "加载中..."
				})
				this.isLoading = true
        const resultConfig = [
          { 
            key: 'songDetail',
            getData: data => data.songs[0]
          },
          {
            key: 'songSimi',
            getData: data => data.songs
          },
          {
            key: 'songComment',
            getData: data => data.hotComments
          },
          {
            key: 'songLyric',
            getData: data => {
              let lyric = data.lrc.lyric
              let regexp = /\[([^\]]+)\]([^\[]+)/g
              let result = [];
              lyric.replace(regexp, ($0, $1, $2) => {
                result.push({ time: this.formatTime2Sec($1), lyric: $2 })
              })
              return result
            }
          },
          {
            key: 'songUrl',
            getData: data => {
              // #ifdef MP-WEIXIN
                this.bgAudioMannger = uni.getBackgroundAudioManager()
              // #endif
              // // #ifdef H5
                this.bgAudioMannger = uni.createInnerAudioContext()
              // #endif
              
              this.bgAudioMannger.title = this.songDetail.name
              this.bgAudioMannger.src = data.data[0].url
              this.bgAudioMannger.onPlay(() =>  {
                this.isPlay = true
              })
              this.bgAudioMannger.onPause(() => {
                this.isPlay = false
              })
              this.bgAudioMannger.onTimeUpdate(() => {
                this.listenLyricIndex()
              })
							this.bgAudioMannger.onEnded(() => {
								this.getMusic(this.$store.state.nextId)
							})
            }
          }
        ];
        const res = await Promise.all([ 
          songDetail(songId), 
          songSimi(songId), 
          songComment(songId), 
          songLyric(songId),
          songUrl(songId)
        ])
        res.forEach(({ data }, index) => {
          if (data.code === 200) this[resultConfig[index].key] = resultConfig[index].getData(data)
        })
				uni.hideLoading()
				this.isLoading = false
        // const [ 
        //   { data: songDetailData }, 
        //   { data: songSimiData },
        // ] = await Promise.all([ songDetail(songId), songSimi(songId)]);
        // if (songDetailData.code === 200) {
        //   this.songDetail = songDetailData.songs[0];
        // }
        // if (songSimiData.code === 200) {
        //   this.songSimi = songSimiData.songs;
        // }
      },
      formatTime2Sec(value) {
        let arr = value.split(":")
        return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(1)
      }
		}
	}
</script>

<style scoped>
  .detail-play {
    width: 580rpx;
    height: 580rpx;
    background-image: url(@/static/disc.png);
    background-size: cover;
    margin: 214rpx auto 0;
    position: relative;
  }
  
  .detail-play image {
    width: 370rpx;
    height: 370rpx;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    animation: 30s linear move infinite;
    animation-play-state: paused;
  }
  
  .detail-play .detail-play-run {
    animation-play-state: running;
  }
  
  @keyframes move {
    from { 
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .detail-play text {
    width: 100rpx;
    height: 100rpx;
    display: inline-block;
    font-size: 100rpx;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
  }
  
  .detail-play view {
    width: 230rpx;
    height: 360rpx;
    position: absolute;
    top: -200rpx;
    right: 0;
    left: 100rpx;
    z-index: 3;
    margin: 0 auto;
    background-image: url(/static/needle.png);
    background-size: cover;
  }
  
  .detail-lyric {
    font-size: 32rpx;
    line-height: 82rpx;
    height: 246rpx;
    text-align: center;
    overflow: hidden;
  }
  
  .detail-lyric-wrap {
    transition: all .5s;
  }
  
  .detail-lyric-item {
    height: 82rpx;
    color: rgba(255, 255, 255, .6);
  }
  
  .detail-lyric-item.active {
    color: white;
  }
  
  .detail-like {
    padding: 0 30rpx;
  }
  
  .detail-like-head {
    font-size: 36rpx;
    color: white;
    margin: 50rpx 0;
  }
  
  .detail-like-item {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;
  }
  
  .detail-like-item text {
    font-size: 50rpx;
    color: #c6c2bf;
  }
  
  .detail-like-img {
    width: 82rpx;
    height: 82rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-right: 20rpx;
  }
  
  .detail-like-img image {
    width: 100%;
    height: 100%;
  }
  
  .detail-like-song {
    color: #c6c2bf;
    flex: 1;
  }
  
  .detail-like-song view:nth-child(1) {
    font-size: 28rpx;
    color: white;
    margin-bottom: 12rpx;
  }
  
  .detail-like-song view:nth-child(2) {
    font-size: 22rpx;
  }
  
  .detail-like-song image {
    width: 26rpx;
    height: 20rpx;
    margin-right: 10rpx;
  }
  
  .detail-comment {
    padding: 0 30rpx;
  }
  
  .detail-comment-head {
    font-size: 36rpx;
    color: white;
    margin: 50rpx 0;
  }
  
  .detail-comment-item {
    margin-bottom: 28rpx;
    display: flex;
  }
  
  .detail-comment-img {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 18rpx;
  }
  
  .detail-comment-img image {
    width: 100%;
    height: 100%;
  }
  
  .detail-comment-content {
    flex: 1;
    color: #cbcacf;
  }
  
  .detail-comment-content-title {
    display: flex;
    justify-content: space-between;
  }
  
  .detail-comment-content-name {
  }
  
  .detail-comment-content-name view:nth-child(1) {
    font-size: 26rpx;
  }
  
  .detail-comment-content-name view:nth-child(2) {
    font-size: 20rpx;
  }
  
  .detail-comment-content-like {
    font-size: 28rpx;
  }
  
  .detail-comment-content-text {
    font-size: 28rpx;
    line-height: 40rpx;
    color: white;
    margin-top: 20rpx;
    border-bottom: 1px #e0e0e0 solid;
    padding-bottom: 40rpx;
  }
</style>
